<app-toolbar>
  <nz-space>
    <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
      <i nz-icon nzType="reload" [nzSpin]="loading"></i>
      刷新
    </button>
    <app-search-box *nzSpaceItem (onSearch)="search($event)"></app-search-box>
    <ng-template [ngIf]="showAddBtn">
      <button *nzSpaceItem nz-button nzType="primary" (click)="create()">
        <i nz-icon nzType="plus" [nzSpin]="loading"></i>
        创建
      </button>
      <button nz-button nzType="primary" *nzSpaceItem class="btn">
        <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
        <a (click)="handleExport()" download="filename" [href]="href"
          >导出</a
        >
      </button>
      <app-import *nzSpaceItem  [url]="'device/group/import'"></app-import>
       
      <button
      *nzSpaceItem
      nz-button
      nzType="primary"
      nzDanger
      (click)="handleBatchDel()"
    >
      批量删除
    </button>
    </ng-template>
  </nz-space>
</app-toolbar>

<nz-table #basicTable [nzData]="datum" [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]="total"
  [nzPageSize]="pageSize" [nzPageIndex]="pageIndex" (nzQueryParams)="onQuery($event)">
  <thead>
    <tr>
      <th
        [nzChecked]="checked"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="handleAllChecked($event)"
      ></th>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="area_id" [nzSortFn]="true">区域id</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="desc">说明</th>
      <th nzColumnKey="created" [nzSortFn]="true">日期</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index" (dblclick)="select(data.id)">
      <td
        [nzChecked]="setOfCheckedId.has(data.id)"
        (nzCheckedChange)="handleItemChecked(data.id, $event)"
      ></td>
      <td>{{data.id}}</td>
      <td>{{data.area_id}}</td>
      <td>{{data.name}}</td>
      <td>{{data.desc}}</td>
      <td>{{data.created | date}}</td>
      <td *ngIf="!ref">
        <a (click)="edit(data)">
          <i nz-icon nzType="edit"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="delete( data.id,0 )" (nzOnCancel)="cancel()"
          nzPopconfirmPlacement="topLeft">
          <i nz-icon nzType="delete"></i>
        </a>
      </td>
      <td *ngIf="ref">
        <a (click)="select(data.id)">
          选择
        </a>
      </td>
    </tr>
  </tbody>
</nz-table>
